<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 550
			canvas.height = 400
			var linCap = ['butt','round','square']
			
			//绘制引导线
			cxt.strokeStyle = '#09f'
			cxt.beginPath()
			cxt.moveTo(10, 10)
			cxt.lineTo(140, 10)
			cxt.moveTo(10, 140)
			cxt.lineTo(140, 140)
			cxt.stroke()
			
			//绘制线条
			cxt.strokeStyle = '#000'
			for(var i = 0; i < linCap.length; i++){
				cxt.lineWidth = 15
				cxt.lineCap = linCap[i]
				cxt.beginPath()
				cxt.moveTo(25+i*50, 10)
				cxt.lineTo(25+i*50, 140)
				cxt.stroke()
			}
		</script>
	</body>
</html>
